<template>
	<view>
		<view class="exerc-card module-back" style="margin-top: 17px">
			<!-- 题目标题 -->
			<view class="card-title su-border2" >
				<view class="title-left">
					<text class="exerc-type">{{ topicType }}</text>
					<text class="exerc-score">({{ itemData.score }}分)</text>
					<text class="exerc-noda" v-if="!itemData.select">未作答</text>
				</view>
				<view class="title-right">
					<text class="crt-text">{{ itemIndex + 1 }}</text>
					<text class="all-text">/{{ exercConfig.num }}</text>
				</view>
			</view>
			<!-- 题目内容 -->
			<view class="card-content">
				<view class="exerc-topic">
					<!-- <text>{{ itemIndex + 1 }}、</text> -->
					<text>{{ itemData.topic || '-' }}</text>
				</view>
				<!-- 题目选择项 -->
				<view class="exerc-options">
					<view class="op-item wkfont" :key="index"
						:class="[selectStyle(item)]"
						v-for="(item, index) in itemData.optionItems" >
						<text class="op-key">{{ item.value }}</text>
						<text class="op-label">{{ item.label }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 错误解析 -->
		<view class="exerc-card module-back"
			style="margin-top: 34upx;">
			<!-- 错误解析 -->
			<view class="card-title su-border2">
				<view class="title-left">
					<text class="exerc-type">答案解析</text>
				</view>
			</view>
			<view class="card-content">
				<view class="correct-text">
					<text>【正确答案】：{{ handleCorrect }}</text>
				</view>
<!--				<view class="analyze-text">-->
<!--					<text>【答案解析】：</text>-->
<!--					<text>{{ itemData.errorRes || '无' }}</text>-->
<!--				</view>-->
			</view>
		</view>
	</view>

</template>

<script>
	/**
	 * 习题练习页面
	 */
	export default {
		components: {  },
		props: {
			itemData: {
				type: Object,
				default() {
					return {}
				}
			},
			itemIndex: {
				type: Number,
				default: 0
			},
			exercConfig: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				selectData: []
			}
		},
		computed: {
			topicType() {
				const { type } = this.itemData
				let typeName = ''
				switch (type){
					case 'radio':
						typeName = '单选'
						break
					case 'multiple':
						typeName = '多选'
						break
					case 'jude':
						typeName = '判断'
						break
				}
				return typeName
			},
			handleCorrect() {
				const { type, correct } = this.itemData
				let crtValue = ''
				switch (type){
					case 'radio':
					case 'jude':
						crtValue = correct
						break
					case 'multiple':
						crtValue = correct.sort().join(',')
						break
				}
				return crtValue
			}
		},
		methods: {
			selectStyle(item) {
				const { select, type, correct } = this.itemData
				if (!select) return ''
				if (type === 'radio' || type === 'jude') {
					if (item.value === correct) {
						return 'correct'
					}
					if (item.value === select && select !== correct) {
						return 'error'
					}
				} else if (select && type === 'multiple') {
					let tmpSelect = select.split(',')
					if (tmpSelect.includes(item.value) && correct.includes(item.value)) {
						return 'correct'
					}
					if (tmpSelect.includes(item.value) && !correct.includes(item.value)) {
						return 'error'
					}
				} else {
					return ''
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./exerc-card.scss";
</style>
